{% extends "main/layout.html" %}

{% block head %}
<style type="text/css">
    .hvcenter {
        position: absolute;
        top: 40%;
        left: 50%;
        text-align: center;
        transform: translateX(-50%) translateY(-40%);
    }

    .hcenter {
        position: absolute;
        top: 60%;
        left: 50%;
        text-align: center;
        transform: translateX(-50%) translateY(-40%);
    }

    .bigtitle {
        color: #FFFFFF;
        font-size: 54px;
    }
</style>
<link rel="stylesheet" href="static/main/css/buttons.css">

{% endblock %}

{% block outcontainer%}


{% endblock %}

{% block scripts %}

<script>
    var home = document.getElementById('homenav');
    var web = document.getElementById('webdocs');
    var fpga = document.getElementById('fpgadocs');
    var algorithm = document.getElementById('algorithm');
    var about = document.getElementById('aboutnav');
    web.className = 'nav-item';
    home.className = 'nav-item';
    fpga.className = 'nav-item';
    algorithm.className = 'nav-item';
    about.className = 'nav-item active';
</script>

<script src="static/main/js/jquery.backstretch.min.js"></script>
<script>
    $.backstretch("static/main/image/bg/1.jpg", {duration: 4000, fade: 800});
    $(".panel-footer").css("color", "white");
</script>
{% endblock %}
